<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="js/css.js"></script>
</head>

<body>
<div class="com_style">
    <div class="main">
        <div class="tab_header">
            banner轮播管理
            <div class="top_add" @click="toAdd">新增</div>
        </div>
        <div class="box">
            <table>
                <tr>
                    <td>图片</td>
                    <td>跳转链接</td>
                    <td>内容</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,index) in list">
                    <td><img :src="imgBaseUrl + item.picUrl" alt=""></td>
                    <td>{{item.link}}</td>
                    <td><div v-html="item.content"></div></td>
                    <td>
                        <div class="btn_edit" @click="toEdit(item.id,index)">编辑</div>
                        <div class="btn_delete" @click="toDelete(item.id)">删除</div>
                    </td>
                </tr>
            </table>
        </div>
        <div id="page1"></div>
    </div>
    <!--<div class="btn_edit">编辑</div>-->
    <!--<div class="btn_add">新增</div>-->
    <!--<div class="btn_delete">删除</div>-->
    <div class="add_model">
        <div class="title">{{title?title:'新增'}}<span>×</span></div>
        <div class="content">
            <table>
                <tr>
                    <td>图片</td>
                    <td>
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="test1" :picUrl="info.picUrl">+</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="demo1" :src="info?imgBaseUrl + info.picUrl:'img/fff-back.jpg'">
                                <p id="demoText"></p>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>跳转链接</td>
                    <td><input type="text" id="link" :value="info?info.link:''"></td>
                </tr>
                <tr>
                    <td>内容</td>
                    <td><textarea id="demo" style="display: none;" :value="info.content"></textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td><button class="sure">确定</button></td>
                </tr>
            </table>
        </div>
    </div>
</div>


<script src="js/config.js"></script>

<script type="text/javascript">
    var Token = localStorage.getItem("Token");
    var limit = 10;
    var offset = 1;
    var count;
    var layedit;
    var edit;
    var app = new Vue({
        el: '.com_style',
        data: {
            list:[],
            imgBaseUrl:imgBaseUrl,
            info:"",
            title:"新增",
            id:""
        },
        beforeCreate: function () {
            var that = this;
        },
        methods:{
            toEdit:function (id,index) {
                console.log(id);
                this.title = "编辑";
                this.id = id;
                this.info = this.list[index];
                $(".add_model").show();
                $(".main").hide();
            },
            toDelete:function (id) {
                get_ajax("/sys/banner/del",{id:id},function (data) {
                    location.reload();
                })
            },
            toAdd:function () {
                this.title = "新增";
                this.info = "";
            }
        },
        updated:function () {
            layui.use('layedit', function() {
                layedit = layui.layedit;
                layedit.set({
                    uploadImage: {
                        url: baseUrl+'/file/layeditUplode?token='+Token,
                        type:"post"
                    }
                });
                edit = layedit.build('demo');
            })
        }

    });

    //图片上传
    layui.use(['upload'], function() {
        var $ = layui.jquery, upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: baseUrl+'/file/upload?token='+Token
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res,index) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }else{
                    var item = this.item;
                    var data = res.data;
                    this.item.attr("picUrl",data.address);
                    this.item.attr("picId",data.id);
                }

            }
            , error: function () {

            }
        });
    })
    $(".sure").click(function () {
        var picUrl = $("#test1").attr("picUrl");
        var link = $("#link").val();
        var content = layedit.getContent(edit);
        if(!picUrl){
            alert("请上传图片！")
        }
        if(app.title == "新增"){
            get_ajax("/sys/banner/add",{picUrl:picUrl,link:link,content:content,type:1},function (data) {
                location.reload();
            })
        }else{
            get_ajax("/sys/banner/edit",{picUrl:picUrl,link:link,content:content,type:1,id:app.id},function (data) {
                location.reload();
            })
        }

    });

    function initPage() {
        get_ajax("/sys/banner/getBannerPage",{limit:limit,offset:offset},function (data) {
            app.list = data;
        })
    }

    get_ajaxPage("/sys/banner/getBannerPage", {
        limit: limit,
        offset: offset,
    }, function (data) {
        app.list = data.data;
        count = data.count;
        layui.use(['layer','laypage'], function () {
            var laypage = layui.laypage;
            laypage.render({
                elem: 'page1',
                count: count,
                limit: limit,
                jump:function (obj, first) {
                    //当前页数
                    offset = obj.curr;
                    if(!first){
                        initPage();
                    }
                }
            });
        })
    })

</script>

</body>

</html>